<template>
	<view>
		<scroll-view class="globe_back" scroll-y="true" style="background: white">
			<view class="home-back">
				<!-- 导航 -->
				<view class="title-box">
					<view class="state-box" :style="{ height: statusBarHeight + 'px' }"></view>
					<view class="flex flex_column py_32 h_88 justify_content_center">
						<text class="f_32 cl_fff boldTtf">欢迎来到同路仁</text>
					</view>
				</view>
				<view>
					<image style="width: 100%" :src="urls + 'headImg.png'" mode="widthFix"></image>
				</view>
				<!-- banner -->
				<!-- <view :style="{top: statusBarHeight*2 + 88 + 24 + 'rpx'}" class="banner-box flex flex_column align_items_center">
					<view class="banner-back1 br_24"></view>
					<view class="banner-back2 br_24"></view>
					<image class="img_686_300 banner-img" src="https://jiuyuan.smomotbo.com/static/imgs/abandoned/banner.png" mode=""></image>
				</view> -->
			</view>
			<!-- marginTop 兼容刘海屏 -->
			<view class="p_32 back_fff br_24 use" style="margin-top: 30px">
				<text class="f_32 boldTtf min_title">常用功能</text>
				<view class="flex justify_content_between mt_32 mb_40">
					<view class="img_330_424 br_24 report-box" @click="isRouter('/pages/index/OfflineStores')">
						<image class="img_330_424" :src="urls + 'hone01.png'" mode=""></image>
					</view>
					<view class="flex flex_column justify_content_between">
						<view class="img_330_200 players-box" @click="isRouter('/pages/index/HaowuMall', true)">
							<image class="img_330_200" :src="urls + 'home03.png'" mode=""></image>
						</view>
						<view class="img_330_200 players-box" @click="isRouter('/pages/index/doorToDoorService', true)">
							<image class="img_330_200" :src="urls + 'home02.png'" mode=""></image>
						</view>
					</view>
				</view>
				<text class="f_32 boldTtf min_title">一键功能</text>
				<view class="flex justify_content_between mt_24 info-box">
					<view class="players-box" style="width: 330rpx; height: 140rpx"
						@click="isRouter('/pages/index/Roadrescue/Roadrescue', true)">
						<image style="width: 330rpx; height: 140rpx" :src="url + 'home04.png'" mode=""></image>
					</view>
					<view class="players-box" style="width: 330rpx; height: 140rpx"
						@click="isRouter('/pages/index/unblanking/unblanking', true)">
						<image style="width: 330rpx; height: 140rpx" :src="url + 'home05.png'" mode=""></image>
					</view>
				</view>
			</view>
			<image class="img_750_40 .mt_40" :src="url + 'technical-support-icon.png'" mode=""></image>
		</scroll-view>
		<u-popup :show="couponShow" :round="10" mode="center" @close="close" @open="open" >
		    <view>
		     <!--   <u-radio-group v-model="radiovalue1" placement="column" @change="groupChange" iconPlacement="right">
		            <u-radio :customStyle="{
		                margin: '8px 16px',
		                background: '#FFEFE5',
		                padding: '16px'
		            }" > -->
					<!-- <view style=""> -->
		                <view class="flex couponBox" style="margin:8px 16px;background:#FFEFE5;padding:16px" v-for="(item, index) in coupon" >
		                    <view class="discount">
		                        <view style="font-size: 52rpx">{{ item.coupon_price }}</view>
		                        <view>{{ item.coupon_text }}</view>
		                    </view>
		                    <view class="title">
		                        <view>{{ item.coupon_title }}</view>
		                        <view class="time">有效期至{{ item.useageend_time }}</view>
		                    </view>
		                </view>
					 <!-- </view>	 -->
		            <!-- </u-radio> -->
		            <view class="couponBtn" @click="lq">点击领取</view>
		        <!-- </u-radio-group> -->
		    </view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				windowHeight: 0,
				tcShow: true,
				newstext: [],
				url: '',
				urls: '',
				couponShow:false,
				// 优惠券
				coupon: [

				],
			};
		},
		onShow() {
			this.url = this.baseUrl + this.imgPath;
			
			this.urls = this.$.ajax_url2+'/imgs/';
			this.is_xinren()
		},
		onLoad() {
			// 获取状态栏高度
			const than = this;
			uni.getSystemInfo({
				success(res) {
					than.statusBarHeight = res.statusBarHeight;
					// 默认px,转成rpx
					than.windowHeight = res.screenHeight * (750 / res.windowWidth) - 100;
				}
			});
		},
		methods: {
			// news(){
			// 	news.home().then(res =>{
			// 		console.log(res)
			// 		this.newstext = res
			// 	})
			// },
			
			is_xinren(){
				this.$.ajax(1,"POST","users/user_index",{},(res)=>{
						if(res.code==200){
							
							if(res.data.is_xinren==0){
								 this.couponShow=true
								 this.coupon=res.coupon
							}
							console.log(res.data)
						}else{
						   this.$.ti_shi(res.msg);
						}
				})
			},
			lq(){
				this.$.ajax(1,"POST","users/lq_coupon",{
					coupon:this.coupon
				},(res)=>{
						if(res.code==200){
							this.$.ti_shi(res.msg)
						
							setTimeout(() => {
							    this.couponShow=false
							}, 1000);
						}else{
							this.$.ti_shi(res.msg)
						}
				})
			},
			goNews() {
				uni.navigateTo({
					url: '/pages/func/system-details/system-details?id=' + this.newstext.id
				});
			},
			isRouter(url, rule) {
				this.$.set_data('hdc','')
				this.$.set_data('zctype','')
				this.$api.auth(url);
				return;
				if (rule) {
					// 检测是否登录
					this.$api.authUrl(url);
				} else {
					// 不检测登录
					this.$api.auth(url);
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	.couponBox {
	    .discount {
	        color: #ff6401;
	        font-size: 24rpx;
	        text-align: center;
	    }
	
	    .title {
	        color: #00091a;
	        font-size: 32rpx;
	        margin-left: 66rpx;
	    }
	
	    .time {
	        color: #999ca3;
	        font-size: 28rpx;
	        display: block;
	        margin-top: 16rpx;
	    }
	}
	
	.couponBtn {
	    margin: 8px 16px;
	    width: 600rpx;
	    height: 100rpx;
	    border-radius: 24rpx;
	    background: #3377ff;
	    text-align: center;
	    line-height: 100rpx;
	    color: white;
	    font-size: 32rpx;
	    font-weight: bold;
	}
	.use {
		position: relative;
		z-index: 9;
	}

	.min_title {
		border-left: 2px solid #3377ff;
		padding-left: 5px;
	}

	.tc {
		width: 80%;
		height: 300px;
		position: fixed;
		top: 50%;
		left: 50%;
		margin-top: -150px;
		margin-left: -45%;
		z-index: 10;
		padding: 5%;

		.title_name {
			text-align: center;
			color: #3377ff;
			font-weight: bold;
		}

		.tc_text {
			color: #666;
		}

		.btn {
			width: 90%;
			height: 50px;
			line-height: 50px;
			text-align: center;
			background: #3377ff;
			position: absolute;
			bottom: 20px;
			left: 50%;
			margin-left: -45%;
		}
	}

	.tc_bg {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.8);
		z-index: 9;
	}

	.home-back {
		width: 750rpx;
		height: 470rpx;
		background-image: linear-gradient(#d9f2ff, #f2fbff);
		position: relative;

		.title-box {
			position: fixed;
			left: 0;
			top: 0;
			z-index: 4;

			.state-box {
				width: 750rpx;
				// background-color: #D9F2FF;
			}
		}
	}

	.banner-box {
		position: relative;

		.banner-img {
			position: absolute;
			z-index: 3;
		}

		.banner-back1 {
			width: 640rpx;
			height: 300rpx;
			background-color: #ccedff;
			position: absolute;
			top: 12rpx;
			position: absolute;
			z-index: 2;
		}

		.banner-back2 {
			width: 560rpx;
			height: 300rpx;
			background-color: #e5f6ff;
			position: absolute;
			top: 24rpx;
			position: absolute;
			z-index: 1;
		}
	}

	.report-box {
		background-color: rgba(0, 165, 255, 0.05);
		position: relative;

		.report-bt {
			width: 188rpx;
			height: 58rpx;
			border-radius: 80rpx;
			background-color: #80d0ff;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			left: 16rpx;
			top: 144rpx;
		}
	}

	.players-box {
		position: relative;

		.players-bt {
			width: 156rpx;
			height: 58rpx;
			border-radius: 80rpx;
			background-color: #59ffd9;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			left: 24rpx;
			top: 116rpx;
		}

		.players-bt2 {
			width: 156rpx;
			height: 58rpx;
			border-radius: 80rpx;
			background-color: #ffd959;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			left: 24rpx;
			top: 116rpx;
		}
	}

	.info-box {
		position: relative;

		.info-bt {
			width: 188rpx;
			height: 66rpx;
			border-radius: 80rpx;
			background-color: #80d0ff;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			left: 16rpx;
			top: 174rpx;
		}
	}
</style>